<template>
    <div class="editor-wrapper">
        <div :id="editorId"></div>
    </div>
</template>

<script>
//wangeditor为富文本编辑器
import api from '../../http/index'
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
import { oneOf } from '@/util'
export default {
    name: 'Editor',
    props: {
        value: {
            type: String,
            default: ''
        },
        /**
         * 绑定的值的类型, enum: ['html', 'text']
         */
        valueType: {
            type: String,
            default: 'html',
            validator: val => {
                return oneOf(val, ['html', 'text'])
            }
        },
        /**
         * @description 设置change事件触发时间间隔
         */
        changeInterval: {
            type: Number,
            default: 200
        },
        /**
         * @description 是否开启本地存储
         */
        cache: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        editorId() {
            return `editor${this._uid}`
        }
    },
    methods: {
        setHtml(val) {
            this.editor.txt.html(val)
        },
        upLoadNewImg(form) {
            return new Promise((resolve, reject) => {
                api.post('/api/UploadForWebInfo/PostImages', form)
                    .then(res => {
                        ///api/ClientsData/UploadImg    http://localhost:1851/UploadForWebInfo/PostImages
                        resolve(res)
                    })
                    .catch(err => {
                        reject(err)
                    })
            })
        }
    },
    mounted() {
        this.editor = new Editor(`#${this.editorId}`)
      

        this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
        this.editor.customConfig.uploadImgMaxLength = 1
        this.editor.customConfig.withCredentials = true
        this.editor.customConfig.uploadFileName = 'myFileName'

        this.editor.customConfig.customUploadImg = async (files, insert) => {
            let formData = new FormData()
            formData.append('file', files[0])
            let data = await this.upLoadNewImg(formData)
            console.log(data) /* upload方法是后台提供的上传图片的接口 */
            /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/ insert(
                data
            )
        }
        this.editor.customConfig.onchange = html => {
            let text = this.editor.txt.text()
            if (this.cache) sessionStorage.editorCache = html
            this.$emit('input', this.valueType === 'html' ? html : text)
            this.$emit('on-change', html, text)
        }
        this.editor.customConfig.onchangeTimeout = this.changeInterval
        // create这个方法一定要在所有配置项之后调用
        this.editor.create()
        // 如果本地有存储加载本地存储内容
        let html = this.value || sessionStorage.editorCache
        if (html) this.editor.txt.html(html)
    }
}
</script>

<style lang="less">
.editor-wrapper * {
    z-index: 100 !important;
}
.w-e-menu {
    z-index: 2 !important;
}
.w-e-text-container {
    z-index: 1 !important;
}
</style>
